<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>

<button id="single">发送单独消息</button>
<button id="all">发送全部消息</button>
<button id="onOpen">onOpen</button>
<button id="onClose">onClose</button>

<script type="text/javascript">

    /**
     * 是因为心跳检测的原因吗
     * 新建一个websocket后，服务器和原来的websocket没有心跳检测了，所以服务端那边自动关闭了
     * @type {null}
     */

    var socket = null;
    var host = 'ws://localhost:8080/webSocket'
    var username = Math.floor(Math.random() * 1000)
    socket = new WebSocket(host + '/' + username);

    document.getElementById("single").onclick = function () {
        socket.send('single');
    }

    document.getElementById("all").onclick = function () {
        socket.send('all');
    }

    document.getElementById("onOpen").onclick = function () {
        socket.onopen = function (ev) {
            socket.send('onOpen');
            console.log(ev);
        }
    }

    document.getElementById("onClose").onclick = function () {
        socket.onclose = function (ev) {
            console.log(ev);
        }
    }
    socket.onmessage = function (ev) {
        console.log(ev);
    }
    socket.onerror = function (ev) {
        console.log(ev);
    }

</script>

</body>
</html>